@import url(../../styles/common.module.scss);

.main_root>.side_bar,
.main_root>.top_bar {
  z-index: 2;
}

.main_root>.main_zone>.side_bar,
.main_root>.main_zone>.top_bar {
  z-index: 1;
}

$top_button_size: 32px;
$top_bar_height : 50px;

.main_root>.top_bar,
.main_root>.main_zone>.top_bar {
  --wails-draggable: drag;
  background-color : white;
  height           : $top_bar_height;
  box-shadow       : 0px 0px 10px #00000055;
  display          : flex;
  padding-left     : 20px;
  padding-right    : 10px;
  align-items      : center;
  transition       : all 200ms;

  .top_bar_ico {
    --wails-draggable: drag;
    width            : 30px;
    height           : 30px;
    align-self       : center;
    margin-right     : 5px;
    transition       : all 200ms;
    user-select      : none;
    display          : none;
  }

  .top_bar_title {
    --wails-draggable: drag;
    font-size        : 16px;
    flex             : 1;
    font-weight      : normal;
    display          : flex;
    align-items      : center;
    transition       : all 200ms;
    line-height      : $top_bar_height;
    white-space      : nowrap;
    word-break       : keep-all;
    overflow         : hidden;
    text-overflow    : ellipsis;
    user-select      : none;
  }

  &>* {
    --wails-draggable: no-drag;
  }


  .top_bar_user_btn {
    display    : flex;
    align-items: center;
    padding    : 4px 8px;
    min-width  : $top_button_size;
  }

  .top_bar_skin_btn {
    align-self: center;
    width     : $top_button_size;
    padding   : 0px;
  }
}

.main_root>.side_bar,
.main_root>.main_zone>.side_bar {
  box-shadow: 0px 0px 10px #00000033;

  :global {
    .ant-layout-sider-children {
      overflow: hidden;
    }
  }

  .nav_menu {
    border-right: none !important;
    overflow    : auto !important;
    overflow-y  : auto !important;
    max-height  : calc(100% - 42px);
  }
}

.main_root {
  width     : 100%;
  height    : 100%;
  transition: margin 200ms;

  display       : flex;
  flex-direction: column;
  align-items   : stretch;

  .main_zone {
    flex       : 1;
    display    : flex;
    align-items: stretch;
    overflow   : hidden;
    transition : margin 200ms;

    .body_zone {
      flex    : 1;
      overflow: hidden;
      position: relative;
    }

    .workspace_zone {
      transition: margin 200ms;
      position  : absolute;
      left      : 0;
      right     : 0;
      top       : 0;
      bottom    : 0;
      margin    : 10px 20px;

      :global {
        .ant-tabs-nav {
          margin-bottom          : 0px !important;
          overflow               : hidden !important;
          border-top-left-radius : 6px !important;
          border-top-right-radius: 6px !important;
        }

        .ant-tabs-content-holder {
          background-color: transparent !important;
          flex            : 1;
        }

        .ant-tabs-content,
        .ant-tabs-tabpane-active {
          margin-top: -1px;
          height    : 100% !important;
          overflow  : hidden !important;
        }
      }

      .page {
        background-color: transparent;
        height          : 100% !important;
        overflow        : hidden;
      }
    }

  }
}

// 紧凑布局
:global(.app_tight) {
  .main_root .main_zone .workspace_zone {
    margin: 10px 0px 0px 0px;

    :global(.ant-tabs-nav) {
      margin-bottom          : unset;
      margin-left            : unset;
      margin-right           : unset;
      overflow               : unset;
      border-top-left-radius : unset;
      border-top-right-radius: unset;

      :global(.ant-tabs-nav-list) {
        padding-left: 12px;
      }
    }

    :global {

      .ant-tabs-content,
      .ant-tabs-tabpane-active {
        margin-top: unset !important;
        overflow  : unset !important;
      }
    }
  }
}

// 非紧凑布局
:global(.app_loose) {
  .main_root .main_zone .workspace_zone {
    :global {
      .ant-tabs-tab {
        border: none !important;
      }
    }
  }
}

:global(.small_screen) {
  $top_button_size: 32px;
  $top_bar_height : 32px;

  .btn_toggle_nav_menv {
    width  : $top_button_size;
    height : $top_button_size;
    padding: 0px !important;
    display: inline-block;
  }

  .top_bar_user_btn {
    max-width: $top_button_size * 10;
    min-width: $top_button_size;
    height   : $top_button_size;
    padding  : 0px 5px !important;
  }

  .top_bar_skin_btn {
    width  : $top_button_size;
    height : $top_button_size;
    padding: 0px !important;
  }

  .main_root,
  :global(.app_tight) .main_root {
    .top_bar {
      padding-left       : 0px;
      padding-right      : 0px;
      height             : $top_bar_height;
      // position        : fixed;
      // top             : 0px;
      // left            : 0px;
      // right           : 0px;
      box-shadow         : none;
      pointer-events     : none;

      &>button {
        pointer-events: all;
      }

      .top_bar_ico {
        display: none;
      }
    }

    .side_bar {
      display: none;
    }

    .main_zone {
      .workspace_zone {
        margin: 0px 0px;

        :global {
          .ant-tabs-nav {
            margin-bottom          : 0px !important;
            margin-left            : 0px !important;
            margin-right           : 0px !important;
            overflow               : auto !important;
            border-top-left-radius : 0px !important;
            border-top-right-radius: 0px !important;

            .ant-tabs-nav-list {
              padding-left : 0px !important;
              padding-right: 0px !important;

              .ant-dropdown-trigger {
                height: $top_button_size !important;

                .ant-tabs-tab-btn {
                  font-size: 12px !important;
                }
              }
            }

            .ant-tabs-nav-operations {
              .ant-tabs-nav-more {
                width  : $top_button_size;
                padding: 0px;
              }
            }
          }

          .ant-tabs-content,
          .ant-tabs-tabpane-active {
            margin-top: 0px !important;
          }
        }
      }
    }
  }
}